<!-- 计算属性 -->
<template>
    <div>
        <input type="button" value="获取远程数据" @click="sendReq()">
    </div>
</template>
<script>
import axios from '../util/myaxios'
const options = {
    methods: {
        async sendReq() {
            //1.演示get请求 和 post请求
            // const req = await axios.get('/api/a1');
            // const req = await axios.post('/api/a2');

            //2.发送请求头
            // const req = await axios.post('/api/a3',{},{
            //     headers:{
            //         Authorization:'abv'
            //     }
            // });

            //3.发送请求时，携带查询参数（拼接字符串） ？name==xxx&&age==xxx
            // const name = encodeURIComponent('张三'); //URL编码
            // const age = 20;
            // const req = await axios.post(`/api/a4?name=${name}&age=${age}`);

            //4.发送请求时，携带请求体数据，并且解决编码问题、不用自己拼接字符串
            // const req = await axios.post('/api/a4',{},{
            //     params:{
            //         name:'张三',
            //         age:18
            //     }
            // });

            //5.用请求体发送数据，格式为urlencoded，就等价于？name==xxx&&age==xxx。想要发送urlencoded格式的数据，要借助 UrlSearchParams();   post请求默认发出的格式是json
            // const params = new URLSearchParams();
            // params.append('name','张三');
            // params.append('age',18);
            // const req = await axios.post('/api/a4', params);

            //6.用请求体发送数据，格式为multipart
            // const params = new FormData();
            // params.append('name','张三');
            // params.append('age',21);
            // const req = await axios.post('/api/a4', params);

            // console.log(req);
            // console.log(req.data.data);

            //7.用 axios.create 创建的对象，可以覆盖默认设置
            // const _axios = axios.create({
            //     baseURL: 'http://localhost:8080',
            //     withCredentials: true
            // });

            // await _axios.post('/api/a6set', {});
            // await _axios.post('/api/a6get', {});

            //8.响应格式
            // try {
            //     const resp = await _axios.get('/api/students2');
            //     console.log(resp);
            // } catch (error) {
            //     console.log(error.response);
            // }

            //9.请求拦截器，每次请求都要携带token，可以放在拦截器中。
            // _axios.interceptors.request.use(
            //     function (config) {
            //         //比如在这里添加统一的headers
            //         config.headers = {
            //             //token
            //             Authorization: "dhaldkaklhdall"
            //         }
            //         return config;
            //     },
            //     function (error) {
            //         return Promise.reject(error);
            //     }
            // );

            //10.响应拦截器，可以实现响应的统一异常处理
            // _axios.interceptors.response.use(
            //     function (response) {
            //         //2xx 范围内走这里
            //         //比如在这里统一处理token过期的情况
            //         return response;
            //     },
            //     function (error) {

            //         //超出 2xx ，比如 4xx 5xx 走这里
            //         if (error.response.status === 400) {
            //             console.log('请求参数不正确!');
            //             //处理掉了异常，使用resolve方法
            //             return Promise.resolve(400);
            //         } else if (error.response.status === 401) {
            //             console.log('身份验证没通过!');
            //             return Promise.resolve(401);
            //         } else if (error.response.status === 404) {
            //             console.log('资源未查到!');
            //             return Promise.resolve(404);
            //         }

            //         //重新将错误抛出
            //         return Promise.reject(error);
            //     }
            // );
            // await _axios.post('/api/a6set1', {});
            // await _axios.post('/api/a6get1', {});


            const resp = axios.get('/api/students');
            console.log(resp);

        }
    }
}
export default options
</script>